<template>
    <div id="annular" ref="annular"></div>
</template>

<script>
// https://www.makeapie.com/editor.html?c=xmQZRm2IHw
import echarts from 'echarts'
export default {
    props: ['isReady', 'allList'],
    watch: {
        isReady (newval, oldval) {
            if (newval) {
                this.$nextTick(() => {   //此处使用这个可以等节点渲染后再获取节点
                    setTimeout(() => {
                        this.getChart()
                    }, 2000);
                })
            }
        }
    },
    data () {
        return {
            echartElement: null,
        }
    },
    methods: {
        getChart () {
            this.echartElement = echarts.init(this.$el)
            var img = ""

            // var dataList = [{
            //     name: '小型企业',
            //     value: 30
            // }, {
            //     name: '中型企业',
            //     value: 25
            // }, {
            //     name: '大型企业',
            //     value: 25
            // }];

            let m = []
            let s = []
            let l = []
            let dataList = []
            let total = this.allList.length
            // let _dataList = []
            this.allList.forEach((v, i) => {
                if (v.scale == 'm') m.push(1)
                if (v.scale == 's') s.push(1)
                if (v.scale == 'l') l.push(1)
            })
            dataList.push(
                { name: "大型企业", value: l.length },
                { name: "中型企业", value: m.length },
                { name: "小型企业", value: s.length },
            )

            // var total = 0

            // dataList.forEach(v => {
            //     total += v.value
            // })

            var data = [];
            var color = ['#ff5b00', '#295bff', '#00ffff']
            for (var i = 0; i < dataList.length; i++) {
                data.push(
                    {
                        value: dataList[i].value,
                        name: dataList[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                shadowBlur: 20,
                                borderColor: color[i],
                                shadowColor: color[i],
                            }
                        }
                    },
                    {
                        value: 2,
                        name: 'other',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                color: 'rgba(0, 0, 0, 0)',
                                borderColor: 'rgba(0, 0, 0, 0)',
                                borderWidth: 0,
                            }
                        }
                    }
                );
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [70, 73],
                hoverAnimation: false,
                // left:'-20%',
                // top:'10%',
                center: [190, 140],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            fontSize: 20,
                            formatter: function (params) {
                                if (params.name !== 'other') {
                                    return params.value
                                } else {
                                    return '';
                                }
                            },
                        },
                        labelLine: {
                            length: 10,
                            length2: 20,
                            show: false, // true
                            color: '#00ffff'
                        }
                    }
                },
                data: data
            }];
            var option = {
                color: color,
                title: {
                    text: total + ' 家',
                    textAlign: "center",
                    left: 185,
                    top: 125,
                    textStyle: {
                        color: '#fff',
                        fontSize: 22,
                        fontWeight: '400'
                    }
                },
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            width: 100,
                            height: 100
                        },
                        left: 140,
                        top: 88
                    }]
                },
                tooltip: {
                    show: false
                },
                legend: {
                    icon: "roundRect",
                    orient: 'vertical',
                    // x: 'left',
                    data: ['大型企业', '中型企业', '小型企业'],
                    right: '5%',
                    bottom: '25',
                    // align: 'right',
                    textStyle: {
                        color: "#fff"
                    },
                    itemGap: 33
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            this.echartElement.setOption(option);
        }
    },
    mounted () {
        // setTimeout(() => {
        //     this.getChart()
        // }, 3000);
    },
    beforeDestroy () {
        this.echartElement.dispose();
    }
}
</script>

<style lang="less" scoped>
#annular {
    width: 100%;
    height: 100%;
}
</style>